﻿
<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });
</script>

<style>
    .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #df4a43;
        color: white;
    }

    .form-group {
        width: 89%;
        text-align: left;
        margin: 0 auto;
    }

    .btn-fullcolor {
        width: 150px;
    }

     .pattern-bg{
        background-image: url("../images/banners/Properties/Nearby.jpg");
        background-size: cover;
    }
    .pattern-bg.colored-bg:before{
        background-color: rgba(0,0,0,0.6);
    }

    .list-style .item{
        height:100%!important;
    }

    h3 small {
        font-size: 17px!important;
    }

</style>

<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">Nearby Listing</h1>

                <!--<ul class="breadcrumb">
                    <li><a href="index.html">Home </a></li>
                    <li><a href="#">Properties</a></li>
                    <li><a href="properties-grid.html">Property Grid Listing</a></li>
                </ul>-->
            </div>
        </div>
    </div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->
<!-- BEGIN HOME ADVANCED SEARCH (class="gray" for a gray background) -->

<div id="advanced-search" class="gray open">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <form>
                    <div class="form-group">

                        <div class="form-control-small">
                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                <a ng-click="propertyTransactChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.TransactName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyTransactChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransact('S',false)">Sale</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTransact('R',false)">Rent</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-control-small">
                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.TypeName }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('R',false)">Residential</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateProperty('C',false)">Commercial</li>
                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateProperty('I',false)">Industrial</li>
                                        <li id="search_bedrooms_chzn_o_4" class="active-result" ng-click="updateProperty('L',false)">Land</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-control-small">
                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                <a ng-click="radiusSearchChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.distant }}KM</span><div><b></b></div>
                                </a>
                                <div ng-show="radiusSearchChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateRadius(1,false)">1KM</li>
                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateRadius(2,false)">2KM</li>
                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateRadius(5,false)">5KM</li>
                                        <li id="search_bedrooms_chzn_o_4" class="active-result" ng-click="updateRadius(10,false)">10KM</li>
                                        <!--<li id="search_bedrooms_chzn_o_5" class="active-result" ng-click="updateRadius(1000,false)">1000 KM</li>-->

                                    </ul>
                                </div>
                            </div>
                        </div>

                        <button ng-click="clearSearch()" class="btn btn-fullcolor">Clear</button>



                        <button ng-click="search()" type="submit" class="btn btn-fullcolor">Search</button>




                        <!--<div class="form-control-large">
                            <input type="text" class="form-control" name="location" placeholder="Road/Project Name">
                        </div>-->


                        <!--<div class="form-control-small">
                            <div id="search_prop_type_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 101.026px;" title="">
                                <a ng-click="propertyStateChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.StateName }}</span><div><b></b></div>
                                </a>

                                <div ng-show="propertyStateChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search">
                                        <input type="text" autocomplete="off">
                                    </div>
                                    <ul class="chzn-results">
                                        <li ng-repeat="state in states" id="search_prop_type_chzn_o_1" class="active-result" ng-mousedown="
                                            propertyStateId = state.StateId;
                                            propertyStateName = state.State;
                                            propertyStateChanged = false;
                                            changeState(propertyStateId,propertyStateName,false); ">{{ state.State }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>-->

                        <!--<div class="form-control-small">
                            <select id="search_status" name="search_status" data-placeholder="Status" class="chzn-done" style="display: none;">
                                <option value=""> </option>
                                <option value="sale">For Sale</option>
                                <option value="rent">For Rent</option>
                            </select>
                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                <a ng-click="propertyLocationChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ property.Location }}</span><div><b></b></div>
                                </a>
                                <div ng-show="propertyLocationChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                    <ul class="chzn-results">
                                        <li ng-repeat="location in locations" id="search_status_chzn_o_1" class="active-result"
                                            ng-mousedown="
                                            updateLocation(location.Location,false);">{{ location.Location }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>-->

                     



                        <!--<div class="form-control-small">
                            <input type="text" class="form-control" name="project" ng-model="property.PriceMin" placeholder="Min Price (RM)" />
                        </div>-->

                        <!--<div class="form-control-small">
                            <input ng-model="property.PriceMax" type="text" class="form-control" name="project" placeholder="Min Price (RM)" />
                        </div>-->

                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<!-- END HOME ADVANCED SEARCH -->
<!-- BEGIN CONTENT WRAPPER -->
<div class="content">
    <div class="container">
        <div class="row">
            <div class="main col-sm-12">

                <div id="listing-header" class="clearfix">
                    
                    <h3 ng-if="!isEmpty(nearbyProperty)">{{ totalItems }} Listings Found!</h3>
                    <span us-spinner="{radius:15, width:4, length: 20}"></span>



                        <div class="form-control-small" style="width:17em!important;">
                            <div id="sort_by_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 103.037px;" title="">
                                <a ng-click="SortOptionChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                    <span>{{ sortOption }}</span><div><b></b></div>
                                </a>
                                <div ng-show="SortOptionChanged == true" class="chzn-drop" style="left:-9000px;">
                                    <div class="chzn-search">
                                        <input type="text" autocomplete="off">
                                    </div>
                                    <ul class="chzn-results">
                                        <li id="sort_by_chzn_o_1" class="active-result" ng-mousedown="updateFilterOption(0,false);">Sorted by High to Low</li>
                                        <li id="sort_by_chzn_o_2" class="active-result" ng-mousedown="updateFilterOption(1,false);">Sorted by Low to High</li>
                                        <li id="sort_by_chzn_o_2" class="active-result" ng-mousedown="updateFilterOption(2,false);">Sorted by Area (A to Z)</li>
                                        <li id="sort_by_chzn_o_2" class="active-result" ng-mousedown="updateFilterOption(3,false);">Sorted by Area (Z to A)</li>

                                    </ul>
                                </div>
                            </div>
                        </div>


                        <div class="sort">
                            <ul>
                                <li class="active"><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-chevron-down" data-original-title="Sort Descending"></i></li>
                                <li><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-chevron-up" data-original-title="Sort Ascending"></i></li>
                            </ul>
                        </div>
                </div>

                <!-- BEGIN PROPERTY LISTING -->
                <div id="property-listing" class="list-style">
                    <h3 ng-if="isEmpty(nearbyProperty)">Ops! We don't have any listings nearby your area!</h3>
                    <div ng-repeat="p in nearbyProperty | filter: paginate | orderBy: sortKey " class="item col-md-4">
                        <!-- Set width to 4 columns for grid view mode only -->
                        <div class="image">
                            <!--<a href="properties-detail.html">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>-->
                            <a ng-show="isSaleProperty == true" ng-click="go(p.propertyid,p, p.modetype[0])" href="/property/{{ p.propertyid }}/S{{ p.Zoning[0] }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>

                            <a ng-show="isSaleProperty == false" ng-click="go(p.propertyid,p, p.modetype[0])" href="/property/{{ p.propertyid }}/R{{ p.Zoning[0] }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>


                            <img ng-if="!isEmpty(p.PropertyURL)" src="{{ p.PropertyURL }}" alt="">
                            <img ng-if="isEmpty(p.PropertyURL)" src="/images/penangrealty-logo.png" />
                        </div>
                        <div class="price">
                            <span ng-show="isSaleProperty == true"><i class="fa fa-home"></i>For Sale</span>
                            <span ng-show="isSaleProperty == false"><i class="fa fa-home"></i>For Rent</span>
                            <span>{{ showPrice(p) | currency:"RM ":2 }}</span>
                        </div>
                        <div class="info">

                            <h3>
                                <p>{{p.Distance | number:2 }}km away</p>
                                <a ng-if="isSaleProperty == true" ng-click="go(p.propertyid,p , p.modetype[0])" href="/property/{{ p.propertyid }}/SR">{{ p.LongHeading }}</a>
                                <a ng-if="isSaleProperty == false" ng-click="go(p.propertyid,p , p.modetype[0])" href="/property/{{ p.propertyid }}/RR">{{ p.LongHeading }}</a>

                                <small>{{ p.location }}, {{ p.state }}</small>
                                <small>{{ p.UpdatedDate | date:'dd-MM-yyyy' }}</small>
                            </h3>
                            <p>{{ p.ShortHeading }}</p>

                            <ul class="amenities">
                                <li> Land Area <i class="icon-area"></i> {{ p.LandSqrtFt }} Sq Ft </li>
                                <li> Built Area <i class="icon-area"></i> {{ p.BuildUp }} Sq Ft </li>

                                <!--<li><i class="icon-bedrooms"></i> {{ p.Room }}</li>
                                <li><i class="icon-bathrooms"></i> {{ p.Bathroom }}</li>-->
                            </ul>

                            <div style="font-size:16px;padding:20px;padding-left:0px;">
                                Agent: {{ p.agentname }} (<a href="tel:+6{{ p.mobile }}">+6{{p.mobile}}</a>)
                            </div>

                            <div style="float:left;">
                                <ul class="social-networks">
                                    <li><a target="_blank" href="http://www.facebook.com/sharer.php?caption={{ getShareTitle(p) }}&description={{ getShareDescription(p) }}&u={{ getShareURL(p) }}&picture={{ getShareImageURL(p) }}"><i class="fa fa-facebook"></i></a></li>
                                    <li><a target="_blank" href="https://twitter.com/intent/tweet?url={{ getShareURL(p) }}&amp;text={{ getShareTitle(p) }}}"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="whatsapp://send?text={{ getShareURL(p) }} {{ getShareTitle(p) }}" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a></li>
                                    <li><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url={{ getShareURL(p) }}&title={{ getShareTitle(p) }}&summary={{ getShareDescription(p) }}"><i class="fa fa-linkedin"></i></a></li>
                                    <li>
                                        <a target="_blank" href="https://plus.google.com/share?text={{ getShareTitle(p) }} {{ getShareURL(p) }}">
                                            <i class="fa fa-google"></i>
                                        </a>
                                    </li>
                                    <li ng-show="isAndroid == true">
                                        <a href="mailto:?subject={{ getShareTitle(p) }}&body=Hi%2C%0A%0ACheck%20out%20this%20property%20from%20Shijieproperty%3A%20{{ getShareURL(p) }}%0A%0AThank%20you.">
                                            <i class="fa fa-envelope"></i>
                                        </a>
                                    </li>
                                    <li ng-show="isAndroid == false">
                                        <a href="mailto:?Subject={{ getShareTitle(p) }}&Body=Hi%2C%0A%0ACheck%20out%20this%20property%20from%20Shijieproperty%3A%20%3Ca%20href%3D%22{{ getShareURL(p) }}%22%3EHere%3C/a%3E%0A%0AThank%20you."><i class="fa fa-envelope"></i></a>
                                    </li>
                                </ul>

                            </div>

                        </div>
                    </div>
                </div>


                <!-- END PROPERTY LISTING -->
                <!-- BEGIN PAGINATION -->

                <div>
                    <h2>
                        Count Per Page: <span>{{ numPerPage }}</span>
                    </h2>
                    <ul style="float:right; max-width:30%; border-top:0px;" class="pagination">
                        <li class="pagination-page" ng-class="{'active': is10Selected}">
                            <a ng-click="changePerPage(10)">10</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is25Selected}">
                            <a ng-click="changePerPage(25)">25</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is50Selected}">
                            <a ng-click="changePerPage(50)">50</a>
                        </li>
                        <li class="pagination-page" ng-class="{'active': is100Selected}">
                            <a ng-click="changePerPage(100)">100</a>
                        </li>
                    </ul>
                </div>

                <ul style="max-width:60%;"
                    uib-pagination 
                    boundary-links="true" 
                    total-items="totalItems" 
                    ng-model="currentPage" 
                    items-per-page="numPerPage" 
                    max-size="6"></ul>


            </div>
        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->